<template>
    <div class="icons-box">

        <swiper :options="swiperOption" ref="mySwiper" v-if="iconsList.length">
        <!-- slides -->

        <swiper-slide v-for="(page,index) in pages" :key="index"> 
            
             <div class="icons-list" v-for="icons in page" :key="icons.id">
                <img class="icons-img" :src="icons.imgUrl" :alt="icons.text">
                <p class="icons-text">{{icons.text}}</p>

            </div>

        </swiper-slide>


        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>

    
        </swiper>




        
     
    </div>
</template>

<script>
export default {
    name:'Homeicons',
    data(){
        return{
           swiperOption: {
               pagination:'.swiper-pagination',
               loop : true,
               autoplay:false
           }
        }
    },
    props:['iconsList'],
    computed:{
        pages(){
            const pages = [];
            console.log('测试',this.iconsList)

            this.iconsList.forEach((item,index) => {

                const page = Math.floor(index/8)

                if(!pages[page]){
                    pages[page] = []
                }

                pages[page].push(item)

            })
            console.log(pages)
            return pages
        }

    }
    
}
</script>


<style lang="stylus" scoped>
    .icons-box >>> .swiper-container
        padding-bottom:25px
    .icons-box
        overflow hidden
        width:100%
        height:160px
        padding-top:5px
        padding-bottom:25px
        background-color:#fff
        .icons-list
            overflow hidden
            width:25%
            height:50%
            float:left
            padding-top:5px
            box-sizing:border-box
            .icons-img
                width:55px
                heihgt:55px
                display:block
                margin:0 auto
            .icons-text
                text-align:center
                color:#333
                margin-top:5px
</style>
